<template>
  <div>
    <alert type="warning">
      LiveChat组的每一位同事,都必须先在这里创建对应的坐席.
      只有如此操作: 1.才可以在会话里分配责任人中看到她.  2.自动分配站内信时才会分配给她. 3.有未回复站内信时,才会给他发邮件提醒.
    </alert>
    <Row type="flex" justify="end">
      <Button type="primary" icon="md-add" @click="showModalAdd()" class="y_condition">新增</Button>
    </Row>
    <hr/>
    <Row type="flex" justify="end">
      <Input type="text" v-model.trim="paramSearch.name" placeholder="员工名/座席名" clearable class="y_condition"></Input>
      <Select v-model="paramSearch.state" class="y_condition" placeholder="在线状态" clearable style="text-align: left;" v-if="hasLiveStatus">
        <Option :value="1">在线</Option>
        <Option :value="2">已下线</Option>
      </Select>
      <Button type="primary" icon="md-search" @click="queryList()" class="y_condition">查询</Button>
    </Row>
    <List border style="margin-top: 20px;">
      <template v-if="serviceList.length == 0">
        <ListItem><div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div></ListItem>
      </template>
      <template v-else>
        <ListItem v-for="(item, index) in serviceList" :key="index" class="list-item">
          <div class="item-head">
            <Tag   :color="getStateColor(item.state)" v-if="hasLiveStatus">{{getState(item.state)}}</Tag>
            <KeyValueView title="员工名" :value="item.userName"></KeyValueView>
            <KeyValueView title="坐席名" :value="item.name"></KeyValueView>

          </div>
          <div class="item-row">
            <badge :status="item.autoAssign===1?'success':'error'" :text="item.autoAssign===1?'轮询分配中':'不参与轮询'" />
            <br>
            <KeyValueView title="未回复消息通知邮箱" :value="item.email"></KeyValueView>
            <KeyValueView title="创建时间" :value="$tiyBJTime(item.createtime)"></KeyValueView>
          </div>
          <div class="item-foot">
            <Button type="warning" icon="md-arrow-down" size="small" @click="offlineCustomerService(item)" v-if="isOnline(item.state)" v-show="hasLiveStatus">下线</Button>
            <Button type="success" icon="md-arrow-up" size="small" @click="onlineCustomerService(item)" v-else v-show="hasLiveStatus">上线</Button>
            <Button type="primary" icon="md-create" size="small" @click="showModalModify(item)">修改</Button>
            <Button type="error" icon="md-trash" size="small" @click="deleteCustomerService(item)">删除</Button>
          </div>
        </ListItem>
      </template>
    </List>
    <div style="margin-top: 20px; text-align: right;">
      <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
            @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size-opts="page.options"
            show-sizer show-elevator/>
    </div>

    <!-- 添加Live Chat 座席 -->
    <Modal v-model="modalAdd.isShow" title="新增Live Chat座席" :mask-closable="false">
      <customer-service-form ref="formAdd" :model-object="paramAdd" is-add></customer-service-form>
      <div slot="footer">
        <Button @click="hideModalAdd()">取消</Button>
        <Button @click="saveAdd()" type="primary">保存</Button>
      </div>
    </Modal>

    <!-- 修改Live Chat 座席 -->
    <Modal v-model="modalModify.isShow" title="编辑Live Chat座席" :mask-closable="false">
      <customer-service-form ref="formModify" :model-object="paramModify" :is-add="false"></customer-service-form>
      <div slot="footer">
        <Button @click="hideModalModify()">取消</Button>
        <Button @click="saveModify()">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import customerServiceData from "./js/customerService/customerServiceData";
import CustomerServiceForm from "./CustomerServiceForm";
import {
  onlineCustomerService,
  offlineCustomerService,
  deleteCustomerService,
  queryCustomerServiceList,
  saveCustomerService,
  updateCustomerService, initPageInfo
} from "./js/customerService/customerServiceFuns";
import KeyValueView from "../widgets/KeyValueView";


export default {
  name: "CustomerService",
  components: {KeyValueView, CustomerServiceForm},
  data() {
    return {
      serviceList: customerServiceData.tData.list,
      page: customerServiceData.tPage.listPage,
      paramSearch: customerServiceData.tParams.paramSearch,
      paramAdd: customerServiceData.tParams.paramAdd,
      paramModify: customerServiceData.tParams.paramModify,
      modalAdd: customerServiceData.tStatus.modalAdd,
      modalModify: customerServiceData.tStatus.modalModify,
      hasLiveStatus:true,// 暂时隐藏在线状态的开关
    }
  },
  methods: {
    queryList() {
      this.page.pageNum = 1;
      queryCustomerServiceList(this);
    },
    changePageNum(pageNum) {
      this.page.pageNum = pageNum;
      queryCustomerServiceList(this);
    },
    changePageSize(pageSize) {
      this.page.pageNum = 1;
      this.page.pageSize = pageSize;
      queryCustomerServiceList(this);
    },
    showModalAdd() {
      this.modalAdd.isShow = true;
      this.$refs.formAdd.$refs.form.resetFields();
    },
    hideModalAdd() {
      this.modalAdd.isShow = false;
    },
    saveAdd() {
      this.$refs.formAdd.$refs.form.validate(valid => {
        if(valid) {
          saveCustomerService(this);
        }else{
          console.error("validate failed");
        }
      })
    },
    showModalModify(item) {
      this.modalModify.isShow = true;
      this.$refs.formModify.$refs.form.resetFields();
      this.paramModify.employeeId = item.employeeId;
      this.paramModify.userName = item.userName;
      this.paramModify.name = item.name;
      this.paramModify.email = item.email;
      this.paramModify.avator = item.avator;
      this.paramModify.autoAssign = item.autoAssign;
    },
    hideModalModify() {
      this.modalModify.isShow = false;
    },
    saveModify() {
      this.$refs.formModify.$refs.form.validate(valid => {
        if(valid) {
          updateCustomerService(this);
        }else{
          console.error("validate failed");
        }
      })
    },
    deleteCustomerService(item) {
      this.$Modal.confirm({
        title: "确认",
        content: "确定要将此座席删除吗？",
        onOk() {
          deleteCustomerService(this, item);
        }
      });
    },
    getStateColor(state) {
      if(state == 1) {
        return "#19be6b";
      }
      return "#808695";
    },
    getState(state) {
      if(state == 1) {
        return "当前在线";
      }
      return "已下线";
    },
    getDateStr(date) {
      if(date == null) {
        return "";
      }
      return this.$tiyBJTime(new Date(date).getTime());
    },
    offlineCustomerService(item) {
      this.$Modal.confirm({
        title: "确认",
        content: "确定要将此座席下线吗？",
        onOk() {
          offlineCustomerService(this, item);
        }
      });
    },
    onlineCustomerService(item) {
      this.$Modal.confirm({
        title: "确认",
        content: "确定要将此座席上线吗？",
        onOk() {
          onlineCustomerService(this, item);
        }
      });
    },
    isOnline(state) {
      return state == 1;
    },
  },
  mounted() {
    initPageInfo();
  }
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../css/base.less";
.list-item {
  display: block;
}
.item-row {
  width: 100%;
  height: 26px;
  line-height: 26px;
  vertical-align: middle;
  text-align: left;
}
.item-head {
  width: 100%;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  text-align: left;
  margin-bottom: 5px;
  .row-title {
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    font-weight: 600;
  }
}
.item-foot {
  width: 100%;
  text-align: right;
  margin-top: 10px;
}
</style>
